import React from 'react';
import {Image,View, Text, TouchableOpacity,DeviceEventEmitter,StyleSheet,FlatList,ScrollView } from 'react-native';
import moment from 'moment'
import navigationhelper from 'src/components/navigationhelper'
import {CalendarList, LocaleConfig} from 'react-native-calendars';
import NavBar from 'src/components/navBar'
import Layer from 'src/components/Layer'
import {isIPhoneX} from 'src/util'
import ScrollableTabView from 'react-native-scrollable-tab-view'
import { deviceWidth ,deviceHeight} from '../../../util';
import MyTeamUserCell from './components/myTeamUserCell'
import {inject,observer} from "mobx-react/native"
import { SearchBar} from '@ant-design/react-native';
import  userHome from '../../../service/Home/index'
import TitleBar from 'src/components/navBar/TitleBar'

@inject('userAuth')

@observer

export default class MyTeamUserManager extends React.Component {

  refreshing = false;
  hadMore = false;
  pageSize = 20;
  pageIndex = 1;

  searchRefreshing = false;
  searchHadMore = false;
  searchPageSize = 20;
  searchPageIndex = 1;

   userId;


    constructor(props) {
      super(props);


      this.state = {
        dataArray:[],
        searchDataArray:[],
        searchText:'',
        isSearch:false,
      }
    }


    componentDidMount(){
      this.userId =  this.props.navigation.getParam('userId');
      this.getDataList()
    }

    ListEmptyComponent=()=> {
      return(
        <View style={{ height: deviceHeight *0.6,alignItems: 'center', justifyContent: 'center' }}>
        <Text style={{fontSize:25,color:'#8E8E93',fontWeight:'bold'}}>暂无数据</Text>
       </View>
      )
  }

  _renderRefresh = () => {
    if(this.state.isSearch){
      this.searchPageIndex = 1;
      this.searchRefreshing = true;
      this.searchDataList(this.state.searchText);
    }
    else{
      this.pageIndex = 1;
      this.refreshing = true;
      this.getDataList();
    }

  }
  _onEndReached = () => {
    if(this.state.isSearch){
      if (!this.searchRefreshing && this.searchHadMore) {
        this.searchPageIndex++;
        this.searchRefreshing = true;
        this.searchDataList(this.state.searchText);
      }
    }
    else{
      if (!this.refreshing && this.hadMore) {
        this.pageIndex++;
         this.refreshing = true;
        this.getDataList();
      }
    }


}

renderFooter = ()=> {
      if (this.hadMore || this.searchHadMore) {
          return (
              <View style={{
                  height:36,
                  backgroundColor:'white',
                  justifyContent: 'center',
                  alignItems: 'center'
              }}>
                  <Text>{'正在加载....'}</Text>
              </View>
          )
      } else {
          return (
              <View style={{
                  height:36,
                  backgroundColor:'white',
                  justifyContent:'center',
                  alignItems: 'center'
              }}>
                  <Text>{'暂无更多'}</Text>
              </View>
          )
      }
  }

  searchDataList=(keyWord)=>{
    Layer.showLoading()
    this.setState({
      isSearch:true
    })
    userHome.fetchTeamSearchChild({
      token: this.props.userAuth.token,
      page:this.searchPageIndex,
      pageSize:this.searchPageSize,
      users_id:this.userId,
      search:keyWord
    }).then((res)=>{
      Layer.hiddenLoading()
      this.searchRefreshing = false;
      if(res.status == 'success'){
        let rows = res.data;
        if (this.pageIndex === 1) {
          this.setState({searchDataArray:rows});
      } else {
          this.setState({searchDataArray:this.state.searchDataArray.concat(rows)});
      }
      this.hadMore = (rows.length === this.pageSize);
      }
    }).catch((res)=>{
      Layer.hiddenLoading()
      this.searchRefreshing = false;
    })

  }

  getDataList=()=>{
    Layer.showLoading()
      userHome.fetchTeamDirectChild({
        token: this.props.userAuth.token,
        page:this.pageIndex,
        pageSize:this.pageSize,
        users_id:this.userId
      }).then((res)=>{
        Layer.hiddenLoading()
        this.refreshing = false;
        if(res.status == 'success'){
          let rows = res.data.data;
          if (this.pageIndex === 1) {
            this.setState({dataArray:rows});
        } else {
            this.setState({dataArray:this.state.dataArray.concat(rows)});
        }
        this.hadMore = (rows.length === this.pageSize);
        }
      }).catch((res)=>{
        Layer.showMsg(res.message)
        Layer.hiddenLoading()
        this.refreshing = false;
      })
    }

  onChange= (value) => {
    this.setState({searchText:value });
  };
    SeparatorView(){
      return(<View style={{height:5,width:deviceWidth, backgroundColor:'#E6E3E6'}}/>)
   }
    middleView =(content,title)=>{
      return(
        <View style={{justifyContent:'center',alignItems:'center'}}>
        <Text style ={styles.upText}>{content}</Text>
        <Text style ={styles.downText}>{title}</Text>
        </View>
      )
    }
    render(){
      return(
        <View style={{flex: 1}}>
      <NavBar  
        title={'用户管理'} 
        back={()=>{navigationhelper.goBack()}} 
        leftText = {'返回'}
        barStyle={'dark-content'}
       />
      <SearchBar
         keyboardType='web-search'
         onFocus={() => console.log('onFocus')}
        value={this.state.searchText}
        placeholder="请输入用户手机号"
        onSubmit={value => this.searchDataList(this.state.searchText)}
        onClear={value => console.log(value, 'onClear')}
        onCancel={() => this.setState({
          isSearch:false
        })}
        showCancelButton = {false}
        onChange={this.onChange}>
        </SearchBar>
        {/* <View> */}
        <FlatList
        style={{marginTop:10}}
        ListEmptyComponent={this.ListEmptyComponent}
        onRefresh={this._renderRefresh}
        onEndReached={this._onEndReached}
        refreshing={this.refreshing}
        onEndReachedThreshold={0.1}
        data={this.state.isSearch?this.state.searchDataArray:this.state.dataArray}
        keyExtractor={(item, index) =>index}
        ItemSeparatorComponent={this.SeparatorView}
        renderItem={({item}) =>
        {
          return(
              <MyTeamUserCell itemData={item} 
              lookUserDetail={(data)=>{
                navigationhelper.push('MyTeamHomePage',{userId:item.id})
              }}
              />
           )
         }
        }/>
        {/* </View> */}
        </View>
      ) 
    }

}

const styles = StyleSheet.create({
  viewStyle:{
    marginTop:20,
    borderRadius:10,
    backgroundColor:'#fff',
    marginLeft:10,
    marginRight:10,
  },
  viewStyleTwo:{
    marginTop:20,
    borderRadius:10,
    backgroundColor:'#fff',
  },
  upText:{
    color:'#9BC7FD',
    fontSize:12,
    },
   downText:{
    color:'#fff',
    fontSize:14,
    marginTop:5,
    fontWeight:'bold'
  },

})